<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>Socket.io Twitter Example</title>
    <style>
      ul.percentage { width: 100% }
      ul.percentage li { display: block; width: 0 }
      ul.percentage li span { float: right; display: block}
      ul.percentage li.love { background: #ff0066; color: #fff}
      ul.percentage li.hate { background: #000; color: #fff}
    </style>
  </head>
  <body>
    <h1>Socket.io Twitter Example</h1>
    <ul class="percentage">
      <li class="love">
        Love <span>0</span>
      </li>
      <li class="hate">
        Hate <span>0</span>
      </li>
    </ul>
    <ul class="tweets"></ul>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
    <script src="/socket.io/socket.io.js"></script>
    <script>
      var socket = io.connect();
      jQuery(function ($) { 
        var tweetList = $('ul.tweets'),
            loveCounter = $('li.love'),
            hateCounter = $('li.hate'),
            loveCounterPercentage = $('li.love span'),
            hateCounterPercentage = $('li.hate span');
        socket.on('tweet', function (data) {
          loveCounter
            .css("width", data.love + '%');
          loveCounterPercentage
            .text(Math.round(data.love * 10) / 10 + '%');
          hateCounter
            .css("width", data.hate + '%');
          hateCounterPercentage
            .text(Math.round(data.hate * 10) / 10 + '%');
          tweetList
            .prepend('<li>' + data.user + ': ' + data.text + '</li>');
        });
      });
    </script>
  </body>
</html>
